<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>项目列表</title>    
    <link href="../css/mui.min.css" rel="stylesheet"/>
   	<link rel="stylesheet" type="text/css" href="../css/mgPublic.css"/>
   	<link rel="stylesheet" type="text/css" href="../css/mggj.css"/>
    <link rel="stylesheet" type="text/css"/>
    <style type="text/css">
    	body{background-color: #f5f5f5;}
    </style>
</head>
<body>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper project_list_sub">
	  <div class="mui-scroll">
	    <!--数据列表-->
	    <ul class="mui-table-view mui-table-view-chevron">
	      <li class="mui-table-view-cell">
	      		<div class="mui-card project_list_card">
					<div class="mui-card-header mui-card-media">
						<div class="mui-media-body">
							<b>Pink</b>
							<p>分享有价值的时尚观</p>
						</div>
					</div>
					<div class="mui-card-content">
						<img src="../images/index/project_list_img.png" alt="" width="100%">
						<div class="annual_rate">
							<p>预计年化</p>
							<p>14-16%</p>
						</div>
					</div>	
					<div class="mui-card-footer">
						<p class="card_footer">起投金额：<b>￥200万</b></p>
						<p class="card_footer">期 限：<b>6个月</b></p>
					</div>
				</div>
	      </li>
	      <li class="mui-table-view-cell">
	      		<div class="mui-card project_list_card">
					<div class="mui-card-header mui-card-media">
						<div class="mui-media-body">
							<b>Pink</b>
							<p>分享有价值的时尚观</p>
						</div>
					</div>
					<div class="mui-card-content">
						<img src="../images/index/project_list_img.png" alt="" width="100%">
						<div class="annual_rate">
							<p>预计年化</p>
							<p>14-16%</p>
						</div>
					</div>	
					<div class="mui-card-footer">
						<p class="card_footer">起投金额：<b>￥200万</b></p>
						<p class="card_footer">期 限：<b>6个月</b></p>
					</div>
				</div>
	      </li>
	      <li class="mui-table-view-cell">
	      		<div class="mui-card project_list_card">
					<div class="mui-card-header mui-card-media">
						<div class="mui-media-body">
							<b>Pink</b>
							<p>分享有价值的时尚观</p>
						</div>
					</div>
					<div class="mui-card-content">
						<img src="../images/index/project_list_img.png" alt="" width="100%">
						<div class="annual_rate">
							<p>预计年化</p>
							<p>14-16%</p>
						</div>
					</div>	
					<div class="mui-card-footer">
						<p class="card_footer">起投金额：<b>￥200万</b></p>
						<p class="card_footer">期 限：<b>6个月</b></p>
					</div>
				</div>
	      </li>
	      <li class="mui-table-view-cell">
	      	<div class="mui-card project_list_card">
				<div class="mui-card-header mui-card-media">
					<div class="mui-media-body">
						<b>Pink</b>
						<p>分享有价值的时尚观</p>
					</div>
				</div>
				<div class="mui-card-content">
					<img src="../images/index/project_list_img.png" alt="" width="100%">
					<div class="annual_rate">
						<p>预计年化</p>
						<p>14-16%</p>
					</div>
				</div>	
				<div class="mui-card-footer">
					<p class="card_footer">起投金额：<b>￥200万</b></p>
					<p class="card_footer">期 限：<b>6个月</b></p>
				</div>
			</div>
	      </li>
	    </ul>
	  </div>
	</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.preload({
	url:'project_detail.html',
	id:'project_detail.html',
	styles:{},//窗口参数
	extras:{}//自定义扩展参数
})
mui.init({
	pullRefresh: {
			container: '#pullrefresh',
			down: {
				callback: pulldownRefresh
			},
			up: {
				contentrefresh: '正在加载...',
				callback: pullupRefresh
			}
	},
	statusBarBackground:'#fff'
});
/**
 * 下拉刷新具体业务实现
 */
function pulldownRefresh() {
	setTimeout(function() {
		var table = document.body.querySelector('.mui-table-view');
		var cells = document.body.querySelectorAll('.mui-table-view-cell');
		for (var i = cells.length, len = i + 3; i < len; i++) {
			var li = document.createElement('li');
			li.className = 'mui-table-view-cell';
			li.innerHTML = '<div class="mui-card project_list_card"><div class="mui-card-header mui-card-media"><div class="mui-media-body"><b>Pink</b><p>'+(i+1)+'分享有价值的时尚观</p></div></div><div class="mui-card-content"><img src="../images/index/project_list_img.png" alt="" width="100%"><div class="annual_rate"><p>预计年化</p><p>14-16%</p></div></div><div class="mui-card-footer"><p class="card_footer">起投金额：<b>￥200万</b></p><p class="card_footer">期 限：<b>6个月</b></p></div>	</div>';
			//下拉刷新，新纪录插到最前面；
			table.insertBefore(li, table.firstChild);
		}
		mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
	}, 1500);
}
var count = 0;
/*上拉加载具体业务实现*/
function pullupRefresh() {
	setTimeout(function() {
		mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
		var table = document.body.querySelector('.mui-table-view');
		var cells = document.body.querySelectorAll('.mui-table-view-cell');
		for (var i = cells.length, len = i + 2; i < len; i++) {
			var li = document.createElement('li');
			li.className = 'mui-table-view-cell';
			li.innerHTML = '<div class="mui-card project_list_card"><div class="mui-card-header mui-card-media"><div class="mui-media-body"><b>Pink</b><p>'+(i+1)+'分享有价值的时尚观</p></div></div><div class="mui-card-content"><img src="../images/index/project_list_img.png" alt="" width="100%"><div class="annual_rate"><p>预计年化</p><p>14-16%</p></div></div><div class="mui-card-footer"><p class="card_footer">起投金额：<b>￥200万</b></p><p class="card_footer">期 限：<b>6个月</b></p></div>	</div>';
			table.appendChild(li);
		}
	}, 1500);
}
if (mui.os.plus) {
	mui.plusReady(function() {
		setTimeout(function() {
			mui('#pullrefresh').pullRefresh().pullupLoading();
		}, 1000);

	});
} else {
	mui.ready(function() {
		mui('#pullrefresh').pullRefresh().pullupLoading();
	});
}
 mui(".project_list_sub").on("tap","li",function(){
   		mui.openWindow('project_detail.html','project_detail.html',{});
   	});
</script>	
</body>
</html>